<template>

    <el-container>
        <el-header>
            <el-row type="flex" justify="space-between" align="middle">
                <!-- span起辅助作用 目的是为了flex布局 -->
                <span></span>
                <h1 style="color: #fff;">学生信息管理系统</h1>
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </el-row>

        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu router :default-active="$route.path" background-color="#304156" text-color="#ffffff" active-text-color="#ffffff">
                    <el-menu-item index="/home/index">
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-menu-item index="/home/classes">
                        <span slot="title">班级管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/student">
                        <span slot="title">学生管理</span>
                    </el-menu-item>

                </el-menu>
            </el-aside>
            <el-main>
                  <router-view></router-view>
            </el-main>
          
        </el-container>
    </el-container>

</template>

<script>
export default {
    name: "Name",
    data() {
        return {}
    },
    created() { },
    methods: {},
}
</script>

<style lang="scss" scoped>
.el-container {
    height: 100vh;

    .el-header {
        background-color: #304152;
        height: 80px !important;
        padding: 0 80px;
        box-sizing: border-box;
    }

    .el-aside {
        background-color: #304156;

        .is-active{
            background-color: #263445 !important;
        }

        .el-menu{
            border: none;
        }
    }

   
}
</style>